<template>
  <div class="c-ph24 c-pt40 c-pb30 c-bd-b1" v-if="themeName == 'mb5' && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30">{{clockInTitles}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{clockInDesc}}</span>
      <span class="c-fs20 c-fc-gray" @click="clickMoreClockIn">更多</span>
    </div>
    <div class=" c-pt30 c-flex-row" @click="clickGoClockIn(item)" v-for="(item,index) in clockInList" :key="index">
      <div class="c-ww240 c-maxh160 c-text-hidden c-br10">
        <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
        <div class="c-fs24 c-text-ellipsis2 c-lh32 c-mb20"><span v-if="item.payType == 4">【奖金{{item.type == 3 ? "返还" : "平分"}}】</span>{{item.name}}</div>
        <div class="c-flex-row c-aligni-center c-pb10">
          <div class="theme-fc c-flex-row c-aligni-end c-flex-grow1 c-w0 c-fs24">
            <span v-if="item.payType == 2||item.payType == 4">{{'￥' | iosPriceFilter}}</span><span :class="item.payType == 2||item.payType == 4 ? 'c-fs24' : 'c-fs22'">{{item.payType | priceValueFilter(item.price, 41)}}</span>
          </div>
          <div class="c-fs18">{{item.type == 1 ? '日历打卡':item.type == 2 ? '作业打卡':'闯关打卡'}}</div>
          <div class="c-fs18 c-ph10" v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))">|</div>
          <div class="c-fs18 c-fc-gray" v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))">{{item.hasMan}}人参与</div>

        </div>
      </div>
    </div>
  </div>
  <div class="c-ph24 c-pt40 c-pb30 c-bd-b12-f5" v-else-if="themeName == 'mb4' && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30 c-p c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{clockInTitles}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{clockInDesc}}</span>
      <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreClockIn">查看更多</span>
    </div>
    <div class="c-pt24 c-flex-row" @click="clickGoClockIn(item)" v-for="(item,index) in clockInList" :key="index">
      <div class="c-pb24">
        <div class="c-ww210 c-maxh140 c-text-hidden c-p c-br10">
          <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
        </div>
      </div>
      <div class="c-ml20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pb24" :class="index == clockInList.length - 1 ? '' : 'c-bd-b1'">
        <div class="c-fs24 c-text-ellipsis2 c-lh32"><span v-if="item.payType == 4">【奖金{{item.type == 3 ? "返还" : "平分"}}】</span>{{item.name}}</div>
        <div class="c-flex-row c-aligni-center">
          <div class="theme-fc c-flex-row c-fs24 c-flex-grow1 c-w0">
            <span v-if="item.payType == 2||item.payType == 4">{{'￥' | iosPriceFilter}}</span><span :class="item.payType == 2||item.payType == 4 ? 'c-fs24' : 'c-fs22'">{{item.payType | priceValueFilter(item.price, 41)}}</span>
          </div>
          <div class="c-fs18">{{item.type == 1 ? '日历打卡':item.type == 2 ? '作业打卡':'闯关打卡'}}</div>
          <div class="c-fs18 c-ph10" v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))">|</div>
          <div class="c-fs18 c-fc-gray" v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))">{{item.hasMan}}人参与</div>
        </div>
      </div>
    </div>
  </div>
  <div v-else-if="themeName == 'mb3' && !isMicroPage">
    <index-three-title-com :titleName="clockInTitles" :titleDesc="clockInDesc" @clickMore="clickMoreClockIn"></index-three-title-com>
    <div class="c-ph24 c-pb20 c-bd-b12-f5">
      <div class=" c-pt24 c-flex-row " @click="clickGoClockIn(item)" v-for="(item,index) in clockInList" :key="index">
        <div class="c-pb24">
          <div class="c-ww210 c-maxh210 c-text-hidden c-p c-br10">
            <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
          </div>
        </div>
        <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pb24" :class="index == clockInList.length - 1 ? '' : 'c-bd-b1'">
          <div class="c-fs24 c-text-ellipsis2 c-lh32"><span v-if="item.payType == 4">【奖金{{item.type == 3 ? "返还" : "平分"}}】</span>{{item.name}}</div>
          <div class="c-flex-row c-aligni-end">
            <div class="c-fs18">{{item.type == 1 ? '日历打卡':item.type == 2 ? '作业打卡':'闯关打卡'}}</div>
            <div class="c-fs18 c-ph10" v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))">|</div>
            <div class="c-fs18 c-fc-gray c-flex-grow1 c-w0" v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))">{{item.hasMan}}人参与</div>
            <div class="c-flex-grow1 c-w0" v-else></div>
            <div class="theme-fc c-flex-row c-fs24">
              <span v-if="item.payType == 2||item.payType == 4">{{'￥' | iosPriceFilter}}</span><span :class="item.payType == 2||item.payType == 4 ? 'c-fs24' : 'c-fs22'">{{item.payType | priceValueFilter(item.price, 41)}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="c-ph24 c-pt24 c-pb40 c-mt12 c-bg-white" v-else-if="themeName == 'mb6' && !isMicroPage">
    <div class="c-flex-row c-aligni-end c-mb10">
      <span class="c-fs28 c-fw-b">{{clockInTitles}}</span>
      <span class="c-fs20 c-fc-gray c-mb2 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{clockInDesc}}</span>
      <span class="c-fs18 c-fc-gray" @click="clickMoreClockIn">更多打卡</span>
    </div>
    <div class="c-pt24 c-flex-row" v-for="(item,index) in clockInList" :key="index" @click="clickGoClockIn(item)">
      <div class="c-ww160 c-maxh106 c-text-hidden">
        <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column" :class="index == clockInList.length - 1 ? '' : 'c-pb24 c-bd-b1'">
        <div class="c-fs24 c-text-ellipsis2 c-lh36 c-fw-b c-hh72"><span v-if="item.payType == 4">【奖金{{item.type == 3 ? "返还" : "平分"}}】</span>{{item.name}}</div>
        <div class="c-flex-row c-aligni-end">
          <div class="c-fs18 c-fc-gray">{{item.type == 1 ? '日历打卡':item.type == 2 ? '作业打卡':'闯关打卡'}}</div>
          <div class="c-fs18 c-ph10 c-fc-gray" v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))">|</div>
          <div class="c-fs18 c-fc-gray c-flex-grow1 c-w0" v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))">{{item.hasMan}}人参与</div>
          <div class="c-flex-grow1 c-w0" v-else></div>
          <div class="theme-fc c-flex-row c-textAlign-r">
            <span class="c-fs24" v-if="item.payType == 2||item.payType == 4">{{'￥' | iosPriceFilter}}</span><span :class="item.payType == 2||item.payType == 4 ? 'c-fs24' : 'c-fs22'">{{item.payType | priceValueFilter(item.price, 41)}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import indexThreeTitleCom from "@/components/templates/common/indexThreeTitleCom.vue";
import { utilJs } from "@/utils/common.js";
export default {
  name: "ClockIndexCom",
  components: {
    indexThreeTitleCom
  },
  props: {
    clockInTitles: {
      type: String,
      default: '作业本打卡',
    },
    clockInDesc: {
      type: String,
      default: '作业本打卡',
    },
    clockInList: {
      type: Array,
      default: () => []
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    isMicroPage: {
      type: Boolean,
      default: false
    },
    showMore: {
      type: Number,
      default: 0,
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      themeName: localStorage.getItem("themeName") ? localStorage.getItem("themeName") : "mb5",
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    };
  },
  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickMoreClockIn() {
      let toPath = `/homePage/clockIn/clockInList`;
      this.iosAppRouteChange(toPath);
    },
    clickGoClockIn(itemInfo) {
      if (itemInfo.isJoin != 1) {
        let toPath = `/homePage/clockIn/clockInDetail?clockInId=${itemInfo.signColId}`;
        this.iosAppRouteChange(toPath);
      } else {
        this.enterClock(itemInfo);
      }
    },
    enterClock(clockInInfo) {
      let title = clockInInfo.name;
      let shareImg = clockInInfo.cover;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${clockInInfo.signColId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = clockInInfo.shareDesc || "点击查看详情";
      let shareData = {
        title: title,
        shareImg: shareImg,
        shareUrl: shareUrl,
        shareDesc: shareDesc
      };
      localStorage.setItem("homeWorkShareInfo", JSON.stringify(shareData));
      switch (clockInInfo.type) {
        case 1:
          //日历打卡,若当前日期不在开始日期和结束日期之间，则从开始日期进入，否则从当前日期进入
          let startTimeTamp = new Date(clockInInfo.startTime.replace(/-/g, "/")).getTime();
          let endTimeTamp = new Date(clockInInfo.endTime.replace(/-/g, "/")).getTime();
          let nowTimeTamp = new Date().getTime();
          let curTime = utilJs.dateFormat(nowTimeTamp);
          if (nowTimeTamp < startTimeTamp || nowTimeTamp > endTimeTamp) {
            curTime = clockInInfo.startTime;
          }
          this.iosAppRouteChange(`/homePage/clockIn/stuHomeWork?workType=1&clockInId=${clockInInfo.signColId}&curDate=${curTime}`);
          break;
        case 2:
          //作业打卡，如果超过一个作业，则进入作业列表，否则进入作业详情
          let nextUrl = `/homePage/clockIn/stuHomeWork?workType=2&clockInId=${clockInInfo.signColId}&curId=${clockInInfo.hwId}`;
          this.iosAppRouteChange(nextUrl);
          break;
        case 3:
          //闯关打卡
          this.iosAppRouteChange(`/homePage/clockIn/stuHomeWork?workType=3&clockInId=${clockInInfo.signColId}&curId=${clockInInfo.hwId}`);
          break;
      }
    },
  }
};
</script>

<style scoped>
.mb4_default .theme-bd-r2 {
  border-right: 2px solid #ff300c;
}
</style>
